<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        *{
            margin: 0;
        }
        .el-header{
            background-color: #B3C0D1;
            color: #333;

            line-height: 60px;
        }
        .el-footer {
            background-color: #B3C0D1;
            color: #333;


        }
        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;


        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
    </style>
</head>
<body>
<div id="my">
    <el-container>
        <el-header>
            <div class="demo-input-size">
                <el-input
                        placeholder="请输入病患名字"
                        v-model="input.name"
                        style="display: inline-block;width: 150px;">
                </el-input>
                <el-select v-model="input.oid" clearable placeholder="科室">
                    <el-option
                            v-for="item in department"
                            :key="item.id"
                            :label="item.oname"
                            :value="item.id">
                    </el-option>
                </el-select>
                <el-date-picker
                        v-model="input.registrationdate"
                        type="date"
                        placeholder="选择日期"
                        format="yyyy 年 MM 月 dd 日"
                        value-format="yyyy-MM-dd">
                </el-date-picker>
                <el-button icon="el-icon-search" circle @click="searchList"></el-button>
            </div>
        </el-header>
        <el-main>
            <template>
                <el-table
                        :data="tableData"
                        stripe
                        style="width: 100%;height: 500px;margin: 0;">
                    <el-table-column
                            prop="name"
                            label="姓名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="oname"
                            label="科室"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="registrationdate"
                            label="日期"
                            width="180">
                    </el-table-column>
                    </el-table-column>
                    <el-table-column
                            label="病历"
                            width="180">
                        <template slot-scope="scope">
                            <el-button @click="showDetailedRecords(scope.row.sid,scope.row.uid,scope.row.dateid,scope.row.day)" type="text" size="small">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </el-main>
        <el-footer>
            <div class="block">
                <span class="demonstration">显示总数</span>
                <el-pagination
                        background
                        @current-change="handleCurrentChange"
                        :page-size="7"
                        layout="total, prev, pager, next"
                        :total="sum">
                </el-pagination>
            </div>
        </el-footer>
    </el-container>
    <el-dialog
            :visible.sync="dialogVisible"
            width="60%"
            >
			  <span>
				  <el-descriptions size="mini" title="病历信息" direction="vertical" :column="2" border>
				    <el-descriptions-item label="姓名">{{DetailedRecords.name}}</el-descriptions-item>
					<el-descriptions-item label="性别">{{DetailedRecords.sex}}</el-descriptions-item>
					<el-descriptions-item label="身份证号" >{{DetailedRecords.idcard}}</el-descriptions-item>
				    <el-descriptions-item label="手机号">{{DetailedRecords.telephone}}</el-descriptions-item>
					<el-descriptions-item label="就医时间">{{DetailedRecords.registrationdate}}</el-descriptions-item>
					<el-descriptions-item label="科室" >{{DetailedRecords.oname}}</el-descriptions-item>
				    <el-descriptions-item label="病历详情" :span="2">{{DetailedRecords.content}}</el-descriptions-item>
					<el-descriptions-item label="处理结果" :span="2">{{DetailedRecords.dealwith}}</el-descriptions-item>
				    <el-descriptions-item label="医师":span="2">{{DetailedRecords.aname}}</el-descriptions-item>
				  </el-descriptions>
			  </span>
        <span slot="footer" class="dialog-footer">
			    <el-button @click="dialogVisible = false">取 消</el-button>
			    <el-button type="primary" @click="download" >下载</el-button>
			  </span>
    </el-dialog>
</div>
<script>
    $.get("/demo/rec/getDep",function (backData) {
        he.department=backData.data;
    })
    var he=new Vue({
        el:"#my",
        data:{
            department:[],
            input:{},
            tableData: [],
            sum:'',
            dialogVisible:false,
            Detailed:{},
            DetailedRecords:{},
        },
        methods:{
            handleCurrentChange(val){
                getRecords(val,7);
            },
            searchList(){
                getRecords(1,7);
            },
            showDetailedRecords(sid,uid,dateid,day){
                he.dialogVisible=true;
                he.Detailed.sid=sid;
                he.Detailed.uid=uid;
                he.Detailed.dateid=dateid;
                he.Detailed.day=day;
                $.post("/demo/rec/getDet",he.Detailed,function (backData) {
                    he.DetailedRecords=backData.data;
                })
            },
            download(){
                window.location.href="/demo/resour/down?sid="+he.Detailed.sid+"&uid="+he.Detailed.uid+"&dateid="+he.Detailed.dateid+"&day="+he.Detailed.day;
            }
        }
    })
    function getRecords(a,b) {
        he.input.page=a;
        he.input.pageCount=b;
        $.post("/demo/rec/getPer",he.input,function (backData) {
            if(backData.code==1){
             he.tableData=backData.data.listData;
             he.sum=backData.data.sum;
            }
        })
    }
    getRecords(1,7);
</script>
</body>
</html>